<script lang="ts" setup>
import { defineProps, defineEmits, ref, computed } from 'vue'

// 定义组件属性
const props = defineProps<{
  value: number
  options: {
    label: string
    value: number
    hide?: boolean
  }[]
}>()

const innerValue = ref(props.value)

// 定义事件
const emit = defineEmits(['update:value'])

// 过滤掉需要隐藏的选项
const visibleOptions = computed(() => {
    return props.options.filter(option => !option.hide)
})

const handleTabClick = (e: any) => {
    emit('update:value', e.paneName)
    innerValue.value = e.paneName
}

</script>

<template>
  <el-tabs v-model="innerValue"  @tab-click="handleTabClick">
    <el-tab-pane v-for="(item, index) in visibleOptions" :key="index" :label="item.label" :name="item.value"></el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">
:deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
